@import '~@/uni_modules/lime-style/index.scss';
/* #ifdef  uniVersion >= 4.75 */ 
$use-css-var: true;
/* #endif */
$pagination: #{$prefix}-pagination;

// 字体和尺寸变量
$pagination-font-size: create-var(pagination-font-size, $font-size-md);
$pagination-item-width: create-var(pagination-item-width, 40px);
$pagination-item-height: create-var(pagination-item-height, 40px);

// 颜色变量
$pagination-text-color: create-var(pagination-text-color, $text-color-2);
$pagination-simple-text-color: create-var(pagination-simple-text-color, $text-color-1); // 新增单独的颜色变量
$pagination-bg-color: create-var(pagination-bg-color, $gray-1);
$pagination-hover-bg-color: create-var(pagination-hover-bg-color, $gray-2);
$pagination-active-bg-color: create-var(pagination-active-bg-color, $primary-color);
$pagination-active-text-color: create-var(pagination-active-text-color, white);
$pagination-disabled-color: create-var(pagination-disabled-color, $text-color-4);
$pagination-disabled-bg-color: create-var(pagination-disabled-bg-color, $gray-2);
$pagination-border-color: create-var(pagination-border-color, transparent);

// 样式变量
$pagination-border-radius: create-var(pagination-border-radius, 5px);
$pagination-disabled-opacity: create-var(pagination-disabled-opacity, 0.5);
$pagination-gap: create-var(pagination-gap, 6px);
  
.#{$pagination} {
	flex-direction: row;
	align-items: center;
	/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
	margin-left: -$pagination-gap;
	margin-right: -$pagination-gap;
	/* #endif */
	/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
	display: flex;
	/* #endif */
	&__simple {
		font-size: $pagination-font-size;
		flex-grow: 1.5;
		text-align: center;
		color: $pagination-simple-text-color;
	}
	&__item {
		&-box {
			margin-left: $pagination-gap;
			/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
			&:first-child {
				margin-left: 0;
			}
			/* #endif */
		}
		
		font-size: $pagination-font-size;
		height: $pagination-item-height;
		color: $pagination-text-color;
		background-color: $pagination-bg-color;
		@include border-radius($pagination-border-radius);
		/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
		border-color: $pagination-border-color;
		/* #endif */
		/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
		cursor: pointer;
		user-select: none;
		&:after {
			border-radius: calc($pagination-border-radius * 2);
			border-color: $pagination-border-color;
		}
		/* #endif */
		&--page {
			flex-grow: 0;
			padding: 0;
			width: $pagination-item-width;
		}
		&--active {
			background-color: $pagination-active-bg-color;
			color: $pagination-active-text-color;
		}
		&--disabled {
			background-color: $pagination-disabled-bg-color !important;
			color: $pagination-disabled-color !important;
		}
		&--hover {
			background-color: $pagination-hover-bg-color !important;
			color: $pagination-text-color !important;
		}
	}
	&__next,&__prev{
		 min-width: $pagination-item-width;
	}
	&--disabled {
		opacity: $pagination-disabled-opacity;
	}
}